<!--
 * @Author: Wangtao
 * @Date: 2022-04-01 13:33:59
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-05-30 14:23:33
-->
<template>
  <div>
    <span class="chat_content">{{waitTime}}</span>
  </div>
</template>
<script>
  export default {
    name: 'WebchatQueueTimer',
    props: {
      manualTime: Number
    },
    data () {
      return {
        waitTime: '',
        interval: ''
      }
    },
    watch: {
      manualTime () {
        this.startInterval()
      }
    },
    methods: {
      startInterval () {
        if (this.manualTime > 0) {
          this.interval = window.setInterval(() => {
            const currentTime = new Date().getTime() // 当前时间
            const diff = Math.round((currentTime - this.manualTime) / 1000) // 等待时长
            const minute = Math.floor(diff / 60) < 10 ? '0' + Math.floor(diff / 60) : Math.floor(diff / 60)
            const second = Math.floor(diff % 60) < 10 ? '0' + Math.floor(diff % 60) : Math.floor(diff % 60)
            this.waitTime = minute + ':' + second
          }, 1000)
        }
      }
    },
    mounted () {
      this.startInterval()
    },
    beforeDestroy () {
      this.waitTime = ''
      window.clearInterval(this.interval)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .chat_content
    color #E99D42
    display inline-block
</style>
